<template>

  <ul :class="simpleWrapClasses" v-show="show" v-if="simple">
    <!--前一页-->
    <li :title="t('i.page.prev')" :class="prevClasses" @click="prev">
      <a><i :class="prevIconClass"></i></a>
    </li>
    <!--input-->
    <div :class="simplePagerClasses" :title="currentPage + '/' + allPages">
      <input
        type="text"
        :value="currentPage"
        autocomplete="off"
        spellcheck="false"
        :style="{'width': scope.pageInputWidth + 'px'}"
        @keydown="keyDown"
        @keyup="keyUp"
        @change="keyUp"/>
      <span>/</span>
      <span v-text="allPages"></span>
    </div>
    <li :title="t('i.page.next')" :class="nextClasses" @click="next">
      <a><i :class="nextIconClass"></i></a>
    </li>
  </ul>
  <!--simpleWrapClasses end-->

  <ul :class="wrapClasses" v-show="show" v-else>
    <span :class="[prefixCls + '-total']" v-if="showTotal">
      <slot>
        {{ t('i.page.total') }}
        {{ total }}
        <template v-if="total <= 1">{{ t('i.page.item') }}</template>
        <template v-else>{{ t('i.page.items') }}</template>
      </slot>
    </span>
    <li
      :title="t('i.page.prev')"
      :class="prevClasses"
      @click="prev">
      <a><i :class="prevIconClass"></i></a>
    </li>

    <li title="1" :class="firstPageClasses" @click="changePage(1)"><a>1</a></li>
    <!--配置了leastPages属性后，页码链接会少显示一部分-->
    <template v-if="!leastPages">
      <li :title="t('i.page.prev5')" v-if="currentPage - 3 > 1" :class="[prefixCls + '-item-jump-prev']"
          @click="fastPrev"><a><i class="ivu-icon ivu-icon-ios-arrow-left"></i></a></li>
      <li :title="currentPage - 2" v-if="currentPage - 2 > 1" :class="[prefixCls + '-item']"
          @click="changePage(currentPage - 2)"><a>{{ currentPage - 2 }}</a></li>
      <li :title="currentPage - 1" v-if="currentPage - 1 > 1" :class="[prefixCls + '-item']"
          @click="changePage(currentPage - 1)"><a>{{ currentPage - 1 }}</a></li>
      <li :title="currentPage" v-if="currentPage != 1 && currentPage != allPages"
          :class="[prefixCls + '-item',prefixCls + '-item-active']"><a>{{ currentPage }}</a></li>
      <li :title="currentPage + 1" v-if="currentPage + 1 < allPages" :class="[prefixCls + '-item']"
          @click="changePage(currentPage + 1)"><a>{{ currentPage + 1 }}</a></li>
      <li :title="currentPage + 2" v-if="currentPage + 2 < allPages" :class="[prefixCls + '-item']"
          @click="changePage(currentPage + 2)"><a>{{ currentPage + 2 }}</a></li>
      <li :title="t('i.page.next5')" v-if="currentPage + 3 < allPages" :class="[prefixCls + '-item-jump-next']"
          @click="fastNext"><a><i class="ivu-icon ivu-icon-ios-arrow-right"></i></a></li>
      <li :title="allPages" v-if="allPages > 1" :class="lastPageClasses" @click="changePage(allPages)"><a>{{ allPages
        }}</a></li>
    </template>
    <template v-else>
      <li :title="t('i.page.prev5')" v-if="currentPage - 2 > 1" :class="[prefixCls + '-item-jump-prev']"
          @click="fastPrev"><a><i class="ivu-icon ivu-icon-ios-arrow-left"></i></a></li>
      <li :title="currentPage - 1" v-if="currentPage - 1 > 1" :class="[prefixCls + '-item']"
          @click="changePage(currentPage - 1)"><a>{{ currentPage - 1 }}</a></li>
      <li :title="currentPage" v-if="currentPage != 1"
          :class="[prefixCls + '-item',prefixCls + '-item-active']"><a>{{ currentPage }}</a></li>
      <li :title="currentPage + 1" v-if="currentPage + 1 <= allPages" :class="[prefixCls + '-item']"
          @click="changePage(currentPage + 1)"><a>{{ currentPage + 1 }}</a></li>
    </template>

    <li
      :title="t('i.page.next')"
      :class="nextClasses"
      @click="next">
      <a><i :class="nextIconClass"></i></a>
    </li>
    <paginationOptions
      :show-sizer="showSizer"
      :page-size="currentPageSize"
      :page-size-opts="limitOpts"
      :placement="placement"
      :transfer="transfer"
      :show-elevator="showElevator"
      :_current.once="currentPage"
      :current="currentPage"
      :all-pages="allPages"
      :is-small="isSmall"
      @on-size="onSize"
      @on-page="onPage"/>

    <li v-if="expCurrentPage || expAll" :class="exportClasses">
      <aty-button v-if="expCurrentPage" @click="handleExportData('current')">导出本页</aty-button>
      <aty-button v-if="expAll" @click="handleExportData('all')">{{ maxDataCount <= 0 ? '导出全部' : '导出' + maxDataCount + '条' }}
      </aty-button>
    </li>
  </ul>
</template>
<script type="text/ecmascript-6" src="./index.js"></script>
